<script type="text/x-template" id="dicti">
    <div>
        <el-container>
            <el-header>
                <div style="padding: 10px;height: 50px">
                    <el-form :model="searchform"  label-width="100px" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="搜索项1" >
                                    <el-input v-model="searchform.item1" placeholder="请输入搜索项1"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="搜索项2" >
                                    <el-input v-model="searchform.item2" placeholder="请输入搜索项2"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="搜索项3" >
                                    <el-input v-model="searchform.item3" placeholder="请输入搜索项3"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <div align="center">
                                    <el-button type="primary" @click="searchclick">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-header>
            <el-container>
<!--                <el-aside width="15%">-->
<!--                    侧边栏-->
<!--                </el-aside>-->
                <el-main>
                    <div style="padding-bottom: 10px">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-edit" @click="add_dicti">添加</el-button>
                            <el-button type="primary" icon="el-icon-share"  @click="share_drawer = true"></el-button>
                            <el-button type="primary" icon="el-icon-delete"></el-button>
                        </el-button-group>
                    </div>
                    <template>
                        <el-table
                                :data="tableList"
                                stripe
                                :key="datalist_reload"
                                @row-click="open_dicti"
                                @selection-change="handleSelectionChange"
                                style="width: 100%;min-height: 500px">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="dictName"
                                    :show-overflow-tooltip="true"
                                    label="字典名称"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="dictKey"
                                    width="250"
                                    label="字典key">
                            </el-table-column>
                            <el-table-column
                                    prop="user.realname"
                                    width="250"
                                    label="作者">
                            </el-table-column>
                            <el-table-column
                                    prop="user.username"
                                    width="250"
                                    label="作者账号">
                            </el-table-column>
                            <el-table-column
                                    prop="createdate"
                                    width="200"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="200">
                                <template slot-scope="scope">
                                    <el-button @click="updateParent(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button type="text" @click="deleteDicti(scope.row)" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <el-divider></el-divider>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[10,50,100,150,200,250,300]"
                            :page-size="size"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>

        <!-- 抽屉        -->
        <el-drawer :title="title" :visible.sync="open_row" :with-header="true" size="45%">
            <div style="padding: 10px">
                <div style="padding-bottom: 10px">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-edit" @click="add_dicti_label" size="small">添加</el-button>
                        <el-button type="primary" icon="el-icon-share"  @click="share_drawer = true" size="small"></el-button>
                        <el-button type="primary" icon="el-icon-delete" size="small"></el-button>
                    </el-button-group>
                    <template>
                        <el-table
                                :data="tableitems"
                                stripe
                                size="mini"
                                :key="item_draw"
                                row-key="id"
                                @selection-change="handleSelectionChange_item"
                                style="width: 100%;min-height: 500px">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="labelName"
                                    :show-overflow-tooltip="true"
                                    label="字典label"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="labelKey"
                                    width="150"
                                    label="字典key">
                            </el-table-column>
                            <el-table-column
                                    prop="labelVal"
                                    width="200"
                                    label="字典值">
                            </el-table-column>
<!--                            <el-table-column-->
<!--                                    prop="createdate"-->
<!--                                    width="200"-->
<!--                                    label="创建时间">-->
<!--                            </el-table-column>-->
                            <el-table-column
                                    label="操作"
                                    width="200">
                                <template slot-scope="scope">
                                    <el-button @click="updateDicti(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button type="text" @click="deleteDicti(scope.row)" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <el-divider></el-divider>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange_item"
                            layout="total,prev, pager, next,jumper"
                            :total="tablestotal">
                    </el-pagination>
                </div>
            </div>
        </el-drawer>

        <el-drawer :title="title" :visible.sync="share_drawer" :with-header="false">
            <div>
                <el-row>
                    <el-col :span="24">
                        <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="活动名称" prop="name">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.share_drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>

        <!-- 添加label面板        -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible_adddicti">
            <div>
                <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="字典名称" prop="dictName">
                                <el-input v-model="form.dictName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="字典key" prop="dictKey">
                                <el-input v-model="form.dictKey"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_adddicti = false">取 消</el-button>
                <el-button type="primary" @click="submit_add_dicti('form')">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 添加面板        -->
        <el-dialog title="添加字典项" :visible.sync="dialogFormVisible_adddictilabel">
            <div>
                <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="labelName" prop="labelName">
                                <el-input v-model="form.labelName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="labelKey" prop="labelKey">
                                <el-input v-model="form.labelKey"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="labelVal" prop="labelVal">
                                <el-input v-model="form.labelVal"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_adddicti = false">取 消</el-button>
                <el-button type="primary" @click="submit_add_dictilabel('form')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑面板        -->
        <el-dialog title="编辑面板" :visible.sync="dialogFormVisible_update">


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_update = false">取 消</el-button>
                <el-button type="primary" @click="submit_update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</script>
<script>
    let dicti={
        data() {
            return {
                datalist_reload:false,
                item_draw:false,
                dialogFormVisible_adddictilabel:false, //添加面板
                form:{
                    dictName:'',
                    dictKey:''
                }, //表单数据
                form_rules: {
                    dictName: [
                        {required: true, message: '请输入字典名称', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                    dictKey:[
                        {required: true, message: '请输入字典key', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                    labelName:[
                        {required: true, message: '请输入labelName', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                    labelKey:[
                        {required: true, message: '请输入labelKey', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                    labelVal:[
                        {required: true, message: '请输入labelVal', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ]
                }, // 表单校验
                share_drawer:false,//抽屉
                dialogFormVisible_adddicti:false, //添加面板
                dialogFormVisible_update:false, //编辑面板
                activeIndex2: '1', //导航默认选中
                searchform:{

                },
                tableList:[], //表格数据
                total:0, // 条数
                size:10,
                multipleSelection:[] ,//多选
                cancelForm() {
                    this.loading = false;
                    this.dialog = false;
                    clearTimeout(this.timer);
                },
                loading: false,
                open_row:false,
                title:'',
                openid:'',
                tableitems:[],
                tablestotal:0,
                pageNum:1,
                itemPageNum:1
            }
        },
        created(){
            this.getlist(this.pageNum)
        },
        template: '#dicti',
        methods: {
            updateDicti(row){
                this.form={};
                this.form=row;
                this.title='修改字典'
                this.dialogFormVisible_adddictilabel=true;
            },
            updateParent(row){
                this.form={};
                this.form=row;
                this.title='修改字典'
                this.dialogFormVisible_adddicti=true;
            },
            updatePost(){
                api.POST('/dicti/update',this.form,(res)=>{
                    if(res.code===0){
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: 'success'
                        });
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            handleCurrentChange_item(val){
                this.this.itemPageNum=val;
                this.getlistpage(this.itemPageNum)
            },
            getlistpage(val){
                this.searchform.pageNum=val;
                this.searchform.pageSize=this.size;
                this.searchform.pid=this.openid;
                api.GET('/dicti/page',this.searchform,(res)=>{
                    if(res.code===0){
                        this.loading=false;
                        this.tableitems=res.data.records;
                        this.tablestotal=res.data.total;
                        this.item_draw=!this.item_draw;
                    }
                })
            },
            add_dicti_label(){
                this.form={};
                this.dialogFormVisible_adddictilabel=true;
            },
            open_dicti(row, column, event){
                if(column.label!=='操作'){
                    this.loading=true;
                    this.title=row.dictName
                    this.open_row=true;
                    this.openid=row.id;
                    this.itemPageNum=1;
                    this.getlistpage(this.itemPageNum)
                }
            },
            //搜索点击
            searchclick(){
                this.getlist(1);
            },
            //分页点击
            handleCurrentChange(val){
                this.pageNum=val;
                this.getlist(this.this.pageNum);
            },
            //打开更新
            update(val){
                this.dialogFormVisible_update=true;
            },
            //确认更新
            submit_update(){
                this.$message({
                    showClose: true,
                    message: '确认更新成功',
                    type: 'success'
                });
                this.dialogFormVisible_update=false;
            },
            //添加
            add_dicti(){
                this.form={};
                this.dialogFormVisible_adddicti=true;
            },
            submit_add_dictilabel(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.form.id){
                            this.updatePost();
                        }else {
                            this.form.pid=this.openid;
                            api.POST('/dicti/add',this.form,(res)=>{
                                if(res.code===0){
                                    this.getlistpage(this.itemPageNum)
                                    this.$message({
                                        showClose: true,
                                        message: '确认添加成功',
                                        type: 'success'
                                    });
                                    this.dialogFormVisible_adddictilabel=false;
                                }else {
                                    this.$message.error(res.msg);
                                }
                            })
                        }

                    } else {
                        return false;
                    }
                });
            },
            //添加确定
            submit_add_dicti(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.form.id){
                            this.updatePost();
                        }else {
                            this.form.pid=0;
                            api.POST('/dicti/add',this.form,(res)=>{
                                if(res.code===0){
                                    this.$message({
                                        showClose: true,
                                        message: '确认添加成功',
                                        type: 'success'
                                    });
                                    this.dialogFormVisible_adddicti=false;
                                    this.$refs['table'].doLayout();
                                }else {
                                    this.$message.error(res.msg);
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                    this.getlist(this.pageNum)
                    this.datalist_reload=!this.datalist_reload;
                });
            },
            //删除
            deleteDicti(val){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.POST('/dicti/delete',{'id':val.id},(result)=> {
                        if(result.code===0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            local.reload();
                        }else {
                            this.$message.error(result.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getlist(val){
                this.searchform.pageNum=val;
                this.searchform.pageSize=this.size;
                api.GET('/dicti/parentpage',this.searchform,(res)=>{
                    if(res.code===0){
                        this.tableList=res.data.records;
                        this.total=res.data.total;
                    }
                })
            },
            //多选
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            //多选
            handleSelectionChange_item(val){

            },
            locationfref(href){
                window.open(href);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

        }
    }
    Vue.component('dicti',dicti);
</script>